<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        div {
            position: relative;
        }
        audio,
        #song {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        audio {
            height: 100px;
        }
        #song {
            top: 100px;
        }
        #song>li {
            height: 36px;
            line-height: 36px;
        }
        .singing {
            color: #ff0700;
        }
    </style>
</head>
<body>
<div>
    <audio src="千古.mp3"  autoplay></audio>
    <ul id="song">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button id="pauseOrPlay">暂停/继续</button>
</div>

<script type="text/javascript">
    var test;
    // 创建XMLHttpRequest对象
    function creatAjax() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
    // 触发（trigger）状态改变事件
    function triggerStateChange() {
        var xmlhttp = creatAjax();
        // 每当readyState（存有XMLHttpRequest的状态信息）改变时，就会触发onreadystatechange事件
        // XMLHttpRequest对象的三个重要属性：
        // onreadystatechange属性（存储函数名）：当readyState属性改变时调用该函数
        // readyState属性：存放XMLHttpRequest的状态（0-4）
        /*0：请求未初始化
        1：服务器连接已建立
        2：请求已接收
        3：请求处理中
        4：请求已完成，且响应已就绪*/
        // status属性：200（ok），404（未找到页面）
        xmlhttp.open("GET", "千古.lrc", true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                test = xmlhttp.responseText;
                return test;
            }
        }
    }
    // 提取歌词内容
    function parseLyric() {
        var text = triggerStateChange();
        var lines = text.split("\n");
        var pattern = /\[\d{2}:\d{2}.\d{2}\]/g;
        var result = [];
        while (!pattern.test(lines[0])) {
            lines = lines.slice(1);
        }
        lines.forEach(function (value, index, array) {
            var time = value.match(pattern);
            var lyrics = value.replace(pattern, "");
            time.forEach(function (value, index, array) {
                var parseTime = value.slice(1, -1).split(":");
                if (lyrics.replace(/(^\s*)|(\s*$)/g,"") === "") {
                    return;
                }
                result.push([parseInt(parseTime[0], 10) * 60 + parseFloat(parseTime[1]), lyrics]);
            });
        });
        result.sort(function (a, b) {
            return a[0] - b[0];
        });
        console.log(result);
        return result;
    }

    function loadXMLDoc() {
        var lyrics = parseLyric();
        var audio = document.getElementsByTagName("audio")[0];
        var lyricsContent = document.getElementById("song");
        audio.ontimeupdate = function (e) {
            var that = this;
            for (var i = 0, length = lyrics.length; i < length; i++) {
                // 一句歌词
                var oneLyric = lyricsContent.getElementsByTagName("li");
                // 判断当前时间
                if (this.currentTime >= lyrics[i][0]) {
                    // lyricsContent.textContent = lyrics[i][1];
                    oneLyric[0].textContent = lyrics[i][1];
                    oneLyric[0].className = "singing";
                    for (var j = 1; j < 5; j++) {
                        if (i + j < length) {
                            oneLyric[j].textContent = lyrics[i+j][1];
                            // return;
                        }
                        else {
                            oneLyric[j].textContent = '';
                        }
                    }
                }
                // 暂停/继续播放
                var playFlag = 0;
                var pauseOrPlay = document.getElementById("pauseOrPlay");
                pauseOrPlay.onclick = function () {
                    // alert("jjj")
                    console.log(playFlag);
                    if (playFlag % 2 === 0) {
                        that.pause();
                    }
                    else {
                        that.play();
                    }
                    playFlag++;
                }
            }
        }
    }

    loadXMLDoc();



</script>
</body>
</html>